<template>
    <el-card class="box-card" shadow="never">
        <div class="title">任务基本信息</div>
        <el-divider class="line" border-style="double" />
        <el-form
            ref="stepform1"
            :model="form"
            :rules="rules"
            label-width="90px"
            label-postion="right"
            :disabled="step1Diabled">
            <el-form-item label="任务名称 " prop="name">
                <el-input
                    v-model="form.name"
                    style="width: 580px"
                    maxlength="15"
                    show-word-limit
                    placeholder="请输入任务名称"
                    @input="taskName"></el-input>
            </el-form-item>
            <el-form-item label="有效期 " prop="time">
                <el-date-picker
                    v-model="form.time"
                    type="datetimerange"
                    range-separator="至"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :disabled-date="disabledDate"
                    @change="changeDate" />
            </el-form-item>
            <el-form-item label="任务类型" prop="type">
                <el-radio-group v-model="form.type" class="task_type" disabled>
                    <el-radio
                        v-for="item in taskType"
                        :key="item.id"
                        class="task-item"
                        :class="{ task_select: form.type == item.id }"
                        :label="item.id">
                        <div class="item-title">
                            <div class="title-left">
                                <el-image class="task-img" :src="item.img"></el-image>
                                <div class="task-text">{{ item.name }}</div>
                            </div>
                        </div>
                        <div class="task-desc">{{ item.desc }}</div>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="描述">
                <el-input
                    v-model="form.desc"
                    style="width: 580px"
                    type="textarea"
                    maxlength="50"
                    :rows="3"
                    show-word-limit
                    placeholder="请输入任务描述"></el-input>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, onMounted } from 'vue';
import router from '@/router';
const stepform1 = ref(null);
const step1 = ref(true);
const step1Diabled = ref(false);
const form = reactive({
    name: '',
    time: '',
    type: 1,
    desc: ''
});
const rules = reactive({
    name: { required: true, message: '任务名称不能为空', trigger: 'blur' },
    time: { required: true, message: '有效期不能为空', trigger: 'blur' },
    type: { required: true, message: '任务类型必须选一个', trigger: ['blur', 'change'] }
});
const taskType = reactive([
    {
        id: 1,
        name: '电话销售',
        img: '/static/employeetasks/phone.png',
        desc: '企业通过员工任务指派员工进行电话销售，通过客户评级及标签为客户分层，进一步转化有意向的客户。'
    },
    {
        id: 2,
        name: '客户拜访',
        img: '/static/employeetasks/person.png',
        desc: '企业通过员工任务指派员工客户线下拜访，跟踪员工客户拜访情况，标记客户合作意愿。'
    },
    {
        id: 3,
        name: '企微招募',
        img: '/static/employeetasks/wechat.png',
        desc: '企业通过该任务，为客户分配加微任务，跟踪员工加微情况，标记客户意向。'
    }
]);
const taskName = () => {
    form.name = form.name.replace(/\s+/g, '');
};
const disabledDate = (time: string) => {
    return time.getTime() < Date.now() - 8.64e7;
};
const save = () => {
    return stepform1.value.validate(valid => {
        step1.value = valid;
        if (!valid) return;
    });
};
const changeDate = (val: any) => {
    if (val?.length > 0) {
        const end = val[1].split(' ');
        const endDate = end[0];
        let endTime = end[1];
        if (endTime == '00:00:00') {
            endTime = '23:59:59';
        }
        form.time = [val[0], endDate + ' ' + endTime];
    }
};
onMounted(() => {
    form.type = router.currentRoute.value.query?.val;
});
defineExpose({
    step1Diabled,
    step1,
    save,
    form
});
</script>
<style lang="scss" scoped>
.box-card {
    border-bottom: none;
    min-height: calc(100vh - 294px);
}

.title {
    font-size: 16px;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-weight: 500;
    color: #585858;
    line-height: 22px;
}

.line {
    margin: 20px 0;
}

:deep(.task_type) {
    .task-item {
        width: 376px;
        height: 196px;

        .el-radio__input {
            display: none;
        }

        .el-radio__label {
            display: inline-block;
            width: 376px;
            height: 196px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            margin-right: 20px;
            padding: 24px;

            .item-title {
                display: flex;
                justify-content: space-between;

                .title-left {
                    display: flex;

                    .task-img {
                        width: 40px;
                        height: 40px;
                        margin-right: 12px;
                    }

                    .task-text {
                        line-height: 40px;
                        font-weight: 500;
                        color: #33302d;
                    }
                }
            }

            .task-desc {
                box-sizing: border-box;
                margin-top: 16px;
                padding: 16px;
                width: 327px;
                height: 92px;
                background: #f9f9f9;
                font-size: 14px;
                white-space: pre-wrap;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #585858;
                line-height: 20px;
            }
        }
    }

    .task_select {
        .el-radio__label {
            border: 1px solid #ff6b00;

            &::before {
                content: '';
                position: absolute;
                top: 4px;
                right: 4px;
                width: 18px;
                height: 18px;
                background: url('/static/employeetasks/select.svg') no-repeat;
                z-index: 1;
            }

            &::after {
                content: '';
                position: absolute;
                top: 1px;
                right: 1px;
                border-top: 22px solid #ff6b00;
                border-right: 22px solid #ff6b00;
                border-bottom: 22px solid #fff;
                border-left: 22px solid #fff;
            }
        }
    }
}
</style>
